<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/popper.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <title>用户中心</title>
  <style>
    body,
    ul,
    a,
    p,
    input {
      padding: 0;
      margin: 0;
      list-style: none;
      text-decoration: none;
      outline: none
    }

    .bg {
      width: 100vw;
      height: 100vh;
      background-image: url(../img/background/11.jpg);
      background-size: cover;
      position: fixed;
      z-index: -1;
    }

    a {
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    }

    .zdy-top {
      width: 100vw;
      height: 3.5rem;
      background-color: rgb(177, 129, 71);
      display: inline-flex;
      flex-wrap: nowrap;
      flex-direction: row;
      justify-content: space-between;
    }

    .zdy-top input {
      width: 13rem;
      height: 1.5rem;
      margin-top: 1rem;
      border-radius: 3vh;
      font-size: 1rem;
      z-index: 100;
    }

    .zdy-top .add {
      font-size: 1.3rem;
      padding-top: 0.8rem;
    }

    .zdy-top .ad,
    .ar {
      width: 40px;
      height: 40px;
      margin-top: 10px;
      margin-left: 10px;
    }

    .cj-search {
      width: 100vw;
      height: 2rem;
      background-color: rgb(133, 117, 98);
    }

    .cj-search>ul {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      align-items: center;
      font-size: 1.2rem;
      margin-right: 0.5rem;
      margin-left: 0.6rem;
    }

    .cj-search .right {
      width: 1.3rem;
      height: 1.3rem;
      margin-right: 0.5rem;
    }

    .suer {
      width: 100vw;
      height: 100%;
    }

    .cj-sue {
      width: 100vw;
      margin-bottom: 5rem;
    }

    .cj-sue img {
      width: 23vw;
      height: 17vh;
      margin: 1rem;
      border-radius: 5%;
      box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.808);
    }

    .cj-sue ul li{
      float: left;
      margin-top: -4rem;
    }
  </style>
</head>

<body>
  <div class="bg"></div>
  <div class="zdy-top">
    <a href="../index.html"><img src="../img//back-icon.png" alt="" class="ad"></a>
    <p class="add">作品分类</p>
    <a href="./mobile/01-page.html"><img src="../img/search-icon2.png" alt="" class="ar"></a>
  </div>
  <div class="cj-search">
    <ul>
      <li>
        <a href="">玄幻</a>
      </li>
      <li>
        <a href="">仙侠</a>
      </li>
      <li>
        <a href="">都市</a>
      </li>
      <li>
        <a href="">悬疑</a>
      </li>
      <li>
        <a href="">女生</a>
      </li>
      <li>
        <a href="">奇幻</a>
      </li>
    </ul>
  </div>
  <div class="suer">
    <div class="cj-sue">
      <ul>
        <li>
          <a href=""><img src="../img/cover/a/0.jpg" alt=""></a>
          <img src="../img/cover/b/1.jpg" alt="">
          <img src="../img/cover/c/2.jpg" alt="">
          <img src="../img/cover/d/3.jpg" alt="">
          <img src="../img/cover/e/4.jpg" alt="">
          <img src="../img/cover/f/5.jpg" alt="">
          <img src="../img/cover/玄幻/0.jpg" alt="">
        </li>
      </ul>
    </div>
  </div>
</body>

</html>